<template>

  <div>
    <data-table
      ref="pagingTable"
      :options="options"
      :list-query="listQuery"
      @deleted="refresh"
      @multi-actions="tableActions">
      <template #filter-content>
        <el-input v-model="listQuery.params.title" style="width:200px" class="filter-item" size="small" placeholder="搜索消息标题或内容" clearable />
        <el-radio-group v-model="listQuery.params.readState" size="small" class="filter-item">
          <el-radio-button :label="0">未读</el-radio-button>
          <el-radio-button :label="1">已读</el-radio-button>
        </el-radio-group>
      </template>

      <template #data-columns>
        <el-table-column
          show-tooltip-when-overflow
          label="消息标题"
          prop="title"
          width="200px"
        />
        <el-table-column
          label="消息"
          prop="content"
          show-overflow-tooltip>
          <template v-slot="scope">
            <el-link type="primary" @click="showDetail(scope.row.id)">{{ scope.row.content }}</el-link>
          </template>
        </el-table-column>
        <el-table-column
          label="发送时间"
          align="center"
          prop="createTime"
          width="180px"
        />
      </template>
    </data-table>

    <el-dialog
      :close-on-click-modal="false"
      :append-to-body="true"
      :visible.sync="dialogVisible"
      :title="detail.title"
      width="60%"
    >
      <small>发送时间：{{ detail.createTime }}</small>
      <el-divider />
      <p class="notice" v-html="$options.filters.formatRichText(detail.content)" />
    </el-dialog>

  </div>
</template>

<script>
import { fetchDetail, markAsRead } from '@/api/sys/user/im'
import store from '@/store'
export default {
  data() {
    return {
      dialogVisible: false,
      listQuery: {
        current: 1,
        size: 10,
        params: {
          readState: 0
        }
      },
      options: {
        // 可批量操作
        multi: true,
        // 列表请求URL
        listUrl: '/api/sys/user/msg/paging',
        delete: {
          enable: true,
          url: '/api/sys/user/msg/user-delete'
        },
        // 批量操作列表
        multiActions: [
          {
            value: 'read',
            label: '标记为已读'
          }
        ]
      },
      detail: {}
    }
  },

  methods: {
    // 消息详情
    showDetail(id) {
      this.dialogVisible = true
      fetchDetail(id).then(res => {
        this.detail = res.data
        this.refresh()
      })
    },

    tableActions(event) {
      if (event.opt === 'read') {
        markAsRead({ ids: event.ids }).then(() => {
          this.$message.success('操作成功！')
          this.refresh()
        })
      }
    },

    // 刷新计数
    refresh() {
      // 立马刷新
      this.$refs.pagingTable.getList()
      // 刷新全局统计
      store.dispatch('user/fetchMsg')
    }
  }
}
</script>
